<template>
  <div>
    <TopNav/>
    <div style="height: 0.2rem;text-align: left; position: absolute; top: 0.1rem;">
      <button @click="handleFullScreen">{{fullscreen ? '取消全屏':'全屏'}}</button>
    </div>
    <Row>
      <Col span="6">
      <div class="box box1">
        <div class="left-top"></div>
        <div class="right-top"></div>
        <div class="left-bottom"></div>
        <div class="right-bottom"></div>
        <div class="title"><span>产量达标率</span></div>
        <div class="content">
          <div class="labels">
            <div class="label blue">达标率</div>
            <div class="label off">90%计划线</div>
          </div>
          <div class="bar-item">
            <Bar :chart-id="chart1Id" :chart-data="seriesData1"/>
          </div>
        </div>
      </div>
      </Col>
      <Col span="6">
      <div class="box box1">
        <div class="left-top"></div>
        <div class="right-top"></div>
        <div class="left-bottom"></div>
        <div class="right-bottom"></div>
        <div class="title"><span>安全日历(5月)</span></div>
        <div class="content">
          <div class="labels">
            <div class="label normal">安全生产</div>
            <div class="label alarm">异常</div>
            <div class="title-r">已安全生产累计1534天</div>
          </div>
          <div class="calendar_table" >
            <table cellspacing="2" cellpadding="1" id="dataTable" border="0">
              <thead>
              <tr>
                <th>周日</th>
                <th>周一</th>
                <th>周二</th>
                <th>周三</th>
                <th>周四</th>
                <th>周五</th>
                <th>周六</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="(item, $index) in dateList" v-bind:key="$index">
                <td v-for="(item2, $index2) in item.row"
                    v-bind:key="$index2" :class="[{'pass': item2.type == 'pass'},{'normal': item2.status == 'normal'}]">
                  <div class="td_box">{{item2.value}}</div>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      </Col>
      <Col span="8">
      <div class="box box1">
        <div class="left-top"></div>
        <div class="right-top"></div>
        <div class="left-bottom"></div>
        <div class="right-bottom"></div>
        <div class="title"><span>一次通过率</span></div>
        <div class="content">
          <div class="bar-item">
            <Line1 :chart-id="chart5Id" :chart-data="seriesData5"/>
          </div>
        </div>
      </div>
      </Col>
      <Col span="4">
      <div class="box box1">
        <div class="left-top"></div>
        <div class="right-top"></div>
        <div class="left-bottom"></div>
        <div class="right-bottom"></div>
        <div class="title"><span>生产效率图</span></div>
        <div class="content">
          <div class="labels">
            <div class="label blue">达标率</div>
            <div class="label off">50%计划线</div>
          </div>
          <div class="bar-item">
            <Bar :chart-id="chart2Id" :chart-data="seriesData2"/>
          </div>
        </div>
      </div>
      </Col>
    </Row>
    <Row>
      <Col span="6">
      <div class="box box1">
        <div class="left-top"></div>
        <div class="right-top"></div>
        <div class="left-bottom"></div>
        <div class="right-bottom"></div>
        <div class="title"><span>产线实时产量达标率</span></div>
        <div class="content">
          <div class="bar-item">
            <div style="width: 60%; position: relative;">
              <div id="gauge1" style="width: 100%; height: 2.8rem"></div>
              <div class="gauge-text">完成率对比</div>
            </div>
            <div class="gauge-box">
              <div class="item item1">当前实际达成率 15%</div>
              <div class="item item2">当前计划达成率 60%</div>
              <div class="item item3">计划达成率 100%</div>
            </div>
          </div>
        </div>
      </div>
      </Col>
      <Col span="14">
      <div class="box box1">
        <div class="left-top"></div>
        <div class="right-top"></div>
        <div class="left-bottom"></div>
        <div class="right-bottom"></div>
        <div class="title"><span>产线实况</span></div>
        <div class="content">
          <div class="labels">
            <div class="label normal">正常</div>
            <div class="label alarm">故障</div>
            <div class="label off">断电</div>
          </div>
          <div class="line-box">
            <div class="l-box" :class="[item.number, item.status]" v-for="(item, index) in lineList" v-bind:key="index">
              <div class="text">{{item.name}}</div>
            </div>
          </div>
        </div>
      </div>
      </Col>
      <Col span="4">
      <div class="box box1">
        <div class="left-top"></div>
        <div class="right-top"></div>
        <div class="left-bottom"></div>
        <div class="right-bottom"></div>
        <div class="title"><span>产线实时生产效率</span></div>
        <div class="content">
          <div class="bar-item">
            <div style="width: 100%; position: relative">
              <div id="gauge2" style="width: 100%; height: 2.8rem;"></div>
              <div class="gauge-text">31.78%</div>
              <div class="gauge-text-sm">(目标值55%)</div>
            </div>
            <div class="gauge-box2">
              <div class="item item1">产线实时生产效率</div>
              <div class="item item2">55%目标指针</div>
            </div>
          </div>
        </div>
      </div>
      </Col>
    </Row>
    <Row>
      <Col span="24">
      <div class="box box1">
        <div class="left-top"></div>
        <div class="right-top"></div>
        <div class="left-bottom"></div>
        <div class="right-bottom"></div>
        <div class="title"><span>异常事件处理记录</span></div>
        <div class="content bottom" ref="bottomtable">
          <div class="table-box" cellspacing="1" cellpadding="1" border="0">
            <div class="table-head">
              <Row>
                <Col :span="1">工位</Col>
                <Col :span="1">异常类型</Col>
                <Col :span="1">异常代码</Col>
                <Col :span="2">异常描述</Col>
                <Col :span="2">异常提交人员</Col>
                <Col :span="2">异常发生时间</Col>
                <Col :span="3">异常分配处理人员</Col>
                <Col :span="1">异常状态</Col>
                <Col :span="2">异常处理开始时间</Col>
                <Col :span="2">异常处理完成时间</Col>
                <Col :span="2">异常处理时间</Col>
                <Col :span="2">异常处理结论</Col>
                <Col :span="3">异常处理完成确认人员</Col>
              </Row>
            </div>
            <div ref="demo" class="scroll-body demo">
              <div class="table-body demo1" ref="demo1">
                <Row>
                  <Col :span="1">1</Col>
                  <Col :span="1">1</Col>
                  <Col :span="1">1</Col>
                  <Col :span="2">1</Col>
                  <Col :span="2">1</Col>
                  <Col :span="2">1</Col>
                  <Col :span="3">1</Col>
                  <Col :span="1">1</Col>
                  <Col :span="2">1</Col>
                  <Col :span="2">1</Col>
                  <Col :span="2">1</Col>
                  <Col :span="2">1</Col>
                  <Col :span="3">1</Col>
                </Row>
                <Row>
                  <Col :span="1">2</Col>
                  <Col :span="1">1</Col>
                  <Col :span="1">1</Col>
                  <Col :span="2">1</Col>
                  <Col :span="2">1</Col>
                  <Col :span="2">1</Col>
                  <Col :span="3">1</Col>
                  <Col :span="1">1</Col>
                  <Col :span="2">1</Col>
                  <Col :span="2">1</Col>
                  <Col :span="2">1</Col>
                  <Col :span="2">1</Col>
                  <Col :span="3">1</Col>
                </Row>
                <Row>
                  <Col :span="1">3</Col>
                  <Col :span="1">1</Col>
                  <Col :span="1">1</Col>
                  <Col :span="2">1</Col>
                  <Col :span="2">1</Col>
                  <Col :span="2">1</Col>
                  <Col :span="3">1</Col>
                  <Col :span="1">1</Col>
                  <Col :span="2">1</Col>
                  <Col :span="2">1</Col>
                  <Col :span="2">1</Col>
                  <Col :span="2">1</Col>
                  <Col :span="3">1</Col>
                </Row>
              </div>
              <div class="demo2" ref="demo2"></div>
            </div>
          </div>
        </div>
      </div>
      </Col>
    </Row>
  </div>
</template>

<script>
import TopNav from '../components/TopNav.vue'
import Bar from '../components/Bar.vue'
import Line1 from '../components/Line.vue'
import Gauge from '../components/Gauge.vue'
import input1 from '../components/input.vue'
import input2 from '../components/input2.vue'
export default {
  name: 'index',
  components: {
    TopNav,
    input1,
    input2,
    Bar,
    Line1,
    Gauge
  },
  data () {
    return {
      fullscreen: false,
      title: '',
      lineList: [
        {
          number: 'n1',
          name: 'seneor facuet 水检设备001',
          status: 'normal'
        },
        {
          number: 'n2',
          name: 'seneor facuet 水检设备002',
          status: 'normal'
        },
        {
          number: 'n3',
          name: 'seneor facuet 水检设备003',
          status: 'normal'
        },
        {
          number: 'n4',
          name: 'seneor facuet 水检设备004',
          status: 'normal'
        },
        {
          number: 'n5',
          name: '大冲主体测试设备',
          status: 'alarm'
        },
        {
          number: 'n6',
          name: '面板锁螺丝设备001',
          status: 'off'
        },
        {
          number: 'n7',
          name: '面板锁螺丝设备002',
          status: 'normal'
        },
        {
          number: 'n8',
          name: '大冲阀体测试设备001',
          status: 'normal'
        },
        {
          number: 'n9',
          name: '大冲阀体测试设备002',
          status: 'normal'
        },
        {
          number: 'n10',
          name: '龙头起泡器测试设备001',
          status: 'normal'
        },
        {
          number: 'n11',
          name: '龙头起泡器测试设备002',
          status: 'normal'
        },
        {
          number: 'n12',
          name: '小盒供料',
          status: 'normal'
        },
        {
          number: 'n13',
          name: '小盒折盒',
          status: 'normal'
        },
        {
          number: 'n14',
          name: '组装线下料升降机',
          status: 'normal'
        },
        {
          number: 'n15',
          name: '小盒升降缓存',
          status: 'normal'
        },
        {
          number: 'n16',
          name: '小盒贴标',
          status: 'normal'
        },
        {
          number: 'n17',
          name: '附件包供料',
          status: 'normal'
        },
        {
          number: 'n18',
          name: '合格证镭射',
          status: 'normal'
        },
        {
          number: 'n19',
          name: '小盒封上盖',
          status: 'normal'
        },
        {
          number: 'n20',
          name: '大箱贴标',
          status: 'normal'
        },
        {
          number: 'n21',
          name: '小盒缓存排序',
          status: 'normal'
        },
        {
          number: 'n22',
          name: '大箱升降缓存',
          status: 'normal'
        },
        {
          number: 'n23',
          name: '提升机',
          status: 'normal'
        },
        {
          number: 'n24',
          name: '大箱封箱打包',
          status: 'normal'
        }
      ],
      chart1Id: 'chart1',
      chart2Id: 'chart2',
      chart3Id: 'chart3',
      chart5Id: 'chart5',
      chart1Data: [
        {
          name: '19/03/26',
          num1: 97
        },
        {
          name: '19/03/27',
          num1: 74
        },
        {
          name: '19/03/28',
          num1: 86
        }
      ],
      chart2Data: [
        {
          name: '19/03/26',
          num1: 97
        },
        {
          name: '19/03/27',
          num1: 74
        },
        {
          name: '19/03/28',
          num1: 86
        }
      ],
      chart3Data: [
        {
          name: '当前实际达成率',
          num: 97
        },
        {
          name: '当前计划达成率',
          num: 17
        },
        {
          name: '计划达成率',
          num: 37
        }
      ],
      chart5Data: [
        {
          name: '08:00',
          num1: 45,
          num2: 65,
          num3: 30,
          num4: 60
        },
        {
          name: '09:00',
          num1: 14,
          num2: 20,
          num3: 30,
          num4: 60
        },
        {
          name: '10:00',
          num1: 17,
          num2: 20,
          num3: 30,
          num4: 60
        },
        {
          name: '11:00',
          num1: 13,
          num2: 20,
          num3: 30,
          num4: 60
        },
        {
          name: '12:00',
          num1: 83,
          num2: 20,
          num3: 30,
          num4: 60
        },
        {
          name: '13:00',
          num1: 14,
          num2: 20,
          num3: 30,
          num4: 60
        },
        {
          name: '14:00',
          num1: 17,
          num2: 20,
          num3: 30,
          num4: 60
        },
        {
          name: '15:00',
          num1: 13,
          num2: 20,
          num3: 30,
          num4: 60
        },
        {
          name: '16:00',
          num1: 83,
          num2: 20,
          num3: 30,
          num4: 60
        },
        {
          name: '17:00',
          num1: 17,
          num2: 20,
          num3: 30,
          num4: 60
        },
        {
          name: '18:00',
          num1: 13,
          num2: 20,
          num3: 30,
          num4: 60
        },
        {
          name: '19:00',
          num1: 13,
          num2: 20,
          num3: 40,
          num4: 70
        },
        {
          name: '20:00',
          num1: 13,
          num2: 40,
          num3: 70,
          num4: 60
        }
      ],
      seriesData1: {
        max: 100,
        legendData: ['达标率'],
        data: {}
      },
      seriesData2: {
        max: 100,
        legendData: ['达标率'],
        data: {}
      },
      seriesData4: {
        max: 100,
        legendData: ['完成率'],
        data: {}
      },
      seriesData5: {
        max: 100,
        legendData: ['工位1', '工位2', '工位3', 'Total'],
        data: {}
      },
      dateList: []
    }
  },
  mounted () {
    var speed = 100
    let demo = this.$refs.demo
    var demo2 = this.$refs.demo2
    var demo1 = this.$refs.demo1
    function Marquee () {
      if (demo.scrollTop >= demo1.offsetHeight) {
        demo.scrollTop = 0
      } else {
        demo.scrollTop = demo.scrollTop + 1
      }
    }
    if (demo1.offsetHeight > demo.offsetHeight) {
      demo2.innerHTML = demo1.innerHTML
      var MyMar = setInterval(Marquee, speed)
      demo.onmouseover = function () { clearInterval(MyMar) }
      demo.onmouseout = function () { MyMar = setInterval(Marquee, speed) }
    }
    this.seriesData1.data = this.getSeriesData(this.chart1Data)
    this.seriesData2.data = this.getSeriesData(this.chart2Data)
    this.seriesData5.data = this.getSeriesData(this.chart5Data)
    let dt = new Date()
    let date = dt.getDate()
    let year = dt.getFullYear()
    let flag = (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0
    let dayCount = [31, flag ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
    let monthIndex = dt.getMonth()
    let currentDaysNum = dayCount[monthIndex] // 当前月份的数量
    // 当前月的第一天的日期
    let firstDay = new Date(year, monthIndex, 1) // 第一天是星期几
    let lastDay = new Date(year, monthIndex, currentDaysNum) // 第一天是星期几
    let weekday = firstDay.getDay()
    let lastweekday = lastDay.getDay()
    let res = [] // 输出第一天之前的日期
    let prevDayIndex = monthIndex === 1 ? 12 : monthIndex - 1
    let prevDaysNum = dayCount[prevDayIndex]
    for (let i = 0; i < weekday; i++) {
      let obj = {
        type: 'pass',
        status: 'normal'
      }
      // obj.value = prevDaysNum - i
      obj.value = ''
      res.unshift(obj)
    }
    for (let j = 1; j <= currentDaysNum; j++) {
      let obj = {
        type: 'current',
        status: j <= date ? 'normal' : ''
      }
       obj.value = j
      res.push(obj)
    }
    for (let i = 1; i < 7 - lastweekday; i++) {
      let obj = {
        type: 'pass'
      }
      // obj.value = i
      obj.value = ''
      res.push(obj)
    }
    let dateList = []
    for (let k = 0; k < 5; k++) {
      let obj = {}
      let arr = res.slice(k * 7, 7 * (k + 1))
      obj.row = arr
      dateList.push(obj)
    }
    this.dateList = dateList
    let multiple = document.body.clientWidth / 1920 < 1 ? 1 : document.body.clientWidth / 1920
    this.initGauge(multiple)
    this.initGauge2(multiple)
  },
  methods: {
    handleFullScreen () {
      let element = document.documentElement;
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
      }
      this.fullscreen = !this.fullscreen;
    },
    FullScreen(el) {
      if (this.isFullscreen) {//退出全屏
        if(document.exitFullscreen){
          document.exitFullscreen()
        }else if( document.mozCancelFullScreen){
          document.mozCancelFullScreen()
        }else if(document.webkitExitFullscreen){
          //改变平面图在google浏览器上面的样式问题
          //               $("#canvasPaintArea").css("position","static").css("width","100%");
          //               $(".buildingsFloor").css("width","70%");
          //               $(".floor-plan").css("width","78%");
          document.webkitExitFullscreen()
        }else if(!document.msRequestFullscreen){
          document.msExitFullscreen()
        }
      }else{    //进入全屏
        if(el.requestFullscreen){
          el.requestFullscreen()
        }else if(el.mozRequestFullScreen){
          el.mozRequestFullScreen()
        }else if(el.webkitRequestFullscreen){
          //改变平面图在google浏览器上面的样式问题
          //               $("#canvasPaintArea").css("position","absolute").css("width","94%");
          //               $(".buildingsFloor").css("width","98%");
          //               $(".floor-plan").css("width","90%");
          el.webkitRequestFullscreen();
        }else if(el.msRequestFullscreen){
          el.msRequestFullscreen()
        }
        location.reload()
      }
    },
    initGauge (initGauge) {
      let option = {
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%'
        },
        splitLine: {
          show: false
        },
        pointer: {
          width: 4
        },
        series: [
          {
            name: '当前实际达成率',
            type: 'gauge',
            detail: {
              show: false,
              formatter: '{value}%',
              color: 'yellow'
            },
            data: [
              {
                value: 15
              }
            ],
            pointer: {
              width: 4
            },
            splitLine: {
              length: 12
            },
            axisLine: {
              lineStyle: {
                color: [[0.3, '#FF761E'], [0.7, '#B3FF20'], [1, '#00BEFF']],
                width: initGauge * 10 // 这个是修改宽度的属性
              }
            }
          },
          {
            name: '当前计划达成率',
            type: 'gauge',
            detail: {
              show: false,
              formatter: '{value}%',
              color: 'yellow'
            },
            data: [
              {
                value: 60
              }
            ],
            pointer: {
              width: 4
            },
            splitLine: {
              length: 12
            },
            axisLine: {
              lineStyle: {
                color: [[0.3, '#FF761E'], [0.7, '#B3FF20'], [1, '#00BEFF']],
                width: initGauge * 10 // 这个是修改宽度的属性
              }
            }
          },
          {
            name: '当前计划达成率',
            type: 'gauge',
            detail: {
              show: false,
              formatter: '{value}%',
              color: 'yellow'
            },
            data: [
              {
                value: 100
              }
            ],
            splitLine: {
              length: 12
            },
            pointer: {
              width: 4
            },
            axisLine: {
              lineStyle: {
                color: [[0.3, '#FF761E'], [0.7, '#B3FF20'], [1, '#00BEFF']],
                width: initGauge * 10 // 这个是修改宽度的属性
              }
            }
          }
        ]
      }
      let myChart = this.$echarts.init(document.getElementById('gauge1'))
      myChart.setOption(option, true)
    },
    initGauge2 (initGauge) {
      let option = {
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%'
        },
        series: [
          {
            name: '当前实际达成率',
            type: 'gauge',
            detail: {
              show: false,
              formatter: '{value}%',
              color: 'yellow'
            },
            pointer: {
              width: 4
            },
            data: [
              {
                value: 15
              },
              {
                value: 45,
                itemStyle: {
                  color: '#ff761f'
                }
              }
            ],
            splitLine: {
              length: 12
            },
            axisLine: {
              lineStyle: {
                color: [[1, '#3284D5']],
                width: initGauge * 10 // 这个是修改宽度的属性
              }
            }
          }
        ]
      }
      let myChart = this.$echarts.init(document.getElementById('gauge2'))
      myChart.setOption(option, true)
    },
    toAssemblyLine () {
      this.$router.push({path: '/assemblyline'})
    },
    getSeriesData (data) {
      let seriesData = {
        names: [],
        series1: [],
        series2: [],
        series3: [],
        series4: []
      }
      for (let i = 0; i < data.length; i++) {
        if (data[i].name) {
          seriesData.names.push(data[i].name)
        }
        if (data[i].num1) {
          seriesData.series1.push(data[i].num1)
        }
        if (data[i].num2) {
          seriesData.series2.push(data[i].num2)
        }
        if (data[i].num3) {
          seriesData.series3.push(data[i].num3)
        }
        if (data[i].num4) {
          seriesData.series4.push(data[i].num4)
        }
      }
      return seriesData
    },
    getSeriesData2 (data) {
      let seriesData = []
      for (let i = 0; i < data.length; i++) {
        let obj = {
          name: data[i].name,
          value: data[i].num
        }
        seriesData.push(obj)
      }
      return seriesData
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" type="text/less" scoped>
  .sidebar-left {
    width: 4.05rem;
    margin-left: 0.32rem;
    float: left;
  }
  @keyframes warn {
    0% {
      transform: scale(1.1);
      opacity: 0.1;
    }
    25% {
      transform: scale(1.3);
      opacity: 0.3;
    }
    50% {
      transform: scale(1.5);
      opacity: 0.5;
    }
    75% {
      transform: scale(1.3);
      opacity: 0.3;
    }
    100% {
      transform: scale(1.1);
      opacity: 0.1;
    }
  }

  .ivu-col {
    padding: 0.05rem;
  }
  .box {
    border:0.02rem solid #6caffe;
    width: 100%;
    position: relative;
    background: rgba(11,26,82,0.34);
    box-shadow:inset 0 0 0.3rem 0.1rem rgba(51, 126, 246, 0.5);
    .title {
      position: relative;
      background-color: #132c7e;
      font-size: 0.28rem;
      font-weight: bolder;
      height: 0.47rem;
      line-height: 0.47rem;
      text-align: left;
      padding: 0 0.2rem;
      margin: 0.01rem;
      box-shadow:inset 0 0.04rem 0.1rem 0 rgba(51, 126, 246, 0.8);
      span {
        background-image: -webkit-gradient(linear, left 0, right 0, from(#00eaff), to(#01aaff));
        -webkit-background-clip: text; /*必需加前缀 -webkit- 才支持这个text值 */
        -webkit-text-fill-color: transparent; /*text-fill-color会覆盖color所定义的字体颜色： */
      }
    }
    .content {
      padding: 0.2rem;
      height: 2.9rem;
      &.bottom {
        height: 1.7rem;
        min-height: auto;
      }
    }
  }
  .top-style {
    content: '';
    position: absolute;
    background-color: #00FCF9;
  }
  .left-top {
    &:before {
      .top-style;
      width: 0.1rem;
      height: 0.02rem;
      left: -0.02rem;
      top: -0.02rem;
    }
    &:after {
      .top-style;
      width: 0.02rem;
      height: 0.1rem;
      left: -0.02rem;
      top: -0.02rem;
    }
  }
  .right-top {
    &:before {
      .top-style;
      width: 0.1rem;
      height: 0.02rem;
      right: -0.02rem;
      top: -0.02rem;
    }
    &:after {
      .top-style;
      width: 0.02rem;
      height: 0.1rem;
      right: -0.02rem;
      top: -0.02rem;
    }
  }
  .right-bottom {
    &:before {
      .top-style;
      width: 0.1rem;
      height: 0.02rem;
      right: -0.02rem;
      bottom: -0.02rem;
    }
    &:after {
      .top-style;
      width: 0.02rem;
      height: 0.1rem;
      right: -0.02rem;
      bottom: -0.02rem;
    }
  }
  .left-bottom {
    &:before {
      .top-style;
      width: 0.1rem;
      height: 0.02rem;
      left: -0.02rem;
      bottom: -0.02rem;
    }
    &:after {
      .top-style;
      width: 0.02rem;
      height: 0.1rem;
      left: -0.02rem;
      bottom: -0.02rem;
    }
  }
  table {
    width: 100%;
    color: #ffffff;
  }
  .table {
    background-color: #030A38;
    border-left: 0.01rem solid #0E6DE9;
    border-bottom: 0.01rem solid #0E6DE9;
    th {
      height: 0.35rem;
      line-height: 0.35rem;
    }
    td {
      height: 0.5rem;
      line-height: 0.5rem;
    }
    td, th {
      border-top: 0.01rem solid #0E6DE9;
      border-right: 0.01rem solid #0E6DE9;
      padding:0 0.1rem;
    }
  }
  .line-box {
    background: url('../assets/product-line.png') no-repeat;
    background-size: 100%;
    width: 8.56rem;
    height: 1.93rem;
    margin: 0.1rem 0.2rem;
    position: relative;
    .l-box {
      width: 0.08rem;
      height: 0.08rem;
      background-color: #4CEC9F;
      border-radius: 0.1rem;
      position: absolute;
      &:before {
        content: '';
        width: 0.01rem;
        position: absolute;
        background-color: #6EB3FF;
      }
      &.alarm {
        background-color: #FC0D1B;
        &:before {
          background-color: #FC0D1B;
        }
        .text {
          border: 0.01rem solid #FC0D1B;
          background-color: #88145f;
        }
      }
      &.off {
        background-color: #FFB500;
        &:before {
          background-color: #FFB500;
        }
        .text {
          border: 0.01rem solid #FFB500;
          background-color: #896b49;
        }
      }
    }
    .text {
      border: 0.01rem solid #6BAAF3;
      border-radius: 1rem;
      color: #ffffff;
      font-size: 0.14rem;
      padding: 0.02rem 0.1rem;
      font-weight: bold;
      background-color: #12309e;
      display: inline-block;
      position: absolute;
      white-space: nowrap;
    }
    .n1 {
      left: 2.21rem;
      bottom: 0.54rem;
      .text {
        top: 0.7rem;
        margin-left: -1rem;
      }
      &:before {
        height: 0.8rem;
        left: 0.1rem;
        top: 90%;
        transform:rotate(-7deg);
      }
    }
    .n2 {
      left: 2.36rem;
      bottom: 0.56rem;
      &:before {
        height: 0.5rem;
        left: -0.17rem;
        bottom: -0.02rem;
        transform:rotate(-50deg);
      }
      .text {
        top: -0.35rem;
        margin-left: -2.15rem;
      }
    }
    .n3 {
      left: 2.51rem;
      bottom: 0.58rem;
      &:before {
        height: 0.5rem;
        left: -0.08rem;
        bottom: 0.05rem;
        transform:rotate(-25deg);
      }
      .text {
        top: -0.62rem;
        margin-left: -2.15rem;
      }
    }
    .n4 {
      left: 2.66rem;
      bottom: 0.6rem;
      .text {
        top: -0.9rem;
        margin-left: -2.15rem;
      }
      &:before {
        height: 0.9rem;
        left: -0.08rem;
        bottom: 0.05rem;
        transform:rotate(-15deg);
      }
    }
    .n5 {
      left: 2.79rem;
      bottom: 0.65rem;
      .text {
        top: -1.2rem;
        margin-left: -1.45rem;
      }
      &:before {
        height: 1rem;
        left: -0.08rem;
        bottom: 0.05rem;
        transform:rotate(-12deg);
      }
    }
    .n6 {
      left: 3.32rem;
      bottom: 0.66rem;
      .text {
        top: 0.75rem;
        margin-left: -0.05rem;
      }
      &:before {
        height: 0.8rem;
        left: 0.13rem;
        top: 100%;
        transform:rotate(-12deg);
      }
    }
    .n7 {
      left: 3.45rem;
      bottom: 0.68rem;
      .text {
        top: 0.45rem;
        margin-left: 0.25rem;
      }
      &:before {
        height: 0.6rem;
        left: 0.25rem;
        top: 0;
        transform:rotate(-40deg);
      }
    }
    .n8 {
      left: 4.55rem;
      bottom: 0.87rem;
      .text {
        top: -0.25rem;
        margin-left: -1.75rem;
      }
      &:before {
        height: 0.4rem;
        left: -0.15rem;
        bottom: -0.05rem;
        transform:rotate(-60deg);
      }
    }
    .n9 {
      left: 4.71rem;
      bottom: 0.90rem;
      .text {
        top: -0.52rem;
        margin-left: -1.75rem;
      }
      &:before {
        height: 0.4rem;
        left: -0.07rem;
        bottom: 0.04rem;
        transform:rotate(-30deg);
      }
    }
    .n10 {
      left: 4.89rem;
      bottom: 0.98rem;
      .text {
        top: -0.74rem;
        margin-left: -1.85rem;
      }
      &:before {
        height: 0.6rem;
        left: -0.07rem;
        bottom: 0.04rem;
        transform:rotate(-20deg);
      }
    }
    .n11 {
      left: 5.05rem;
      bottom: 0.98rem;
      .text {
        top: 1.1rem;
        margin-left: 0.15rem;
      }
      &:before {
        height: 1.1rem;
        left: 0.18rem;
        top: 0.04rem;
        transform:rotate(-15deg);
      }
    }
    .n12 {
      left: 5.41rem;
      bottom: 1.23rem;
      .text {
        top: -0.94rem;
        margin-left: -1.45rem;
      }
      &:before {
        height: 1rem;
        left: -0.4rem;
        bottom: -0.04rem;
        transform:rotate(-45deg);
      }
    }
    .n13 {
      left: 5.57rem;
      bottom: 1.45rem;
      .text {
        top: -0.72rem;
        margin-left: -0.75rem;
      }
      &:before {
        height: 0.6rem;
        left: -0.17rem;
        bottom: 0;
        transform:rotate(-40deg);
      }
    }
    .n14 {
      left: 5.66rem;
      bottom: 0.94rem;
      .text {
        top: 0.75rem;
        margin-left: -0.25rem;
      }
      &:before {
        height: 0.7rem;
        left: 50%;
        top: 100%;
      }
    }
    .n15 {
      left: 5.68rem;
      bottom: 1.37rem;
      .text {
        top: -0.79rem;
        margin-left: 0;
      }
      &:before {
        height: 0.6rem;
        left: 0.1rem;
        bottom: 0.05rem;
        transform:rotate(10deg);
      }
    }
    .n16 {
      left: 5.84rem;
      bottom: 1.18rem;
      .text {
        top: -0.65rem;
        margin-left: 0;
      }
      &:before {
        height: 0.5rem;
        left: 0.1rem;
        bottom: 0.05rem;
        transform:rotate(10deg);
      }
    }
    .n17 {
      left: 6.26rem;
      bottom: 1.24rem;
      .text {
        top: 1.38rem;
        margin-left: 0.75rem;
      }
      &:before {
        height: 1.7rem;
        left: 0.5rem;
        top: -0.06rem;
        transform:rotate(-32deg);
      }
    }
    .n18 {
      left: 6.6rem;
      bottom: 1.29rem;
      .text {
        top: 1.08rem;
        margin-left: 0.55rem;
      }
      &:before {
        height: 1.3rem;
        left: 0.37rem;
        top: -0.03rem;
        transform:rotate(-30deg);
      }
    }
    .n19 {
      left: 6.6rem;
      bottom: 1.29rem;
      .text {
        top: 1.08rem;
        margin-left: 0.55rem;
      }
      &:before {
        height: 1.3rem;
        left: 0.37rem;
        top: -0.03rem;
        transform:rotate(-30deg);
      }
    }
    .n20 {
      left: 6.95rem;
      bottom: 1.54rem;
      .text {
        top: -0.62rem;
        margin-left: -0.15rem;
      }
      &:before {
        height: 0.6rem;
        left: -0.01rem;
        bottom: 0.05rem;
        transform:rotate(-6deg);
      }
    }
    .n21 {
      left: 7.12rem;
      bottom: 1.22rem;
      .text {
        top: 0.98rem;
        margin-left: 1.25rem;
      }
      &:before {
        height: 1.7rem;
        left: 0.75rem;
        top: -0.3rem;
        transform:rotate(-55deg);
      }
    }
    .n22 {
      left: 7.34rem;
      bottom: 1.69rem;
      .text {
        top: -0.46rem;
        margin-left: 0.4rem;
      }
      &:before {
        height: 0.6rem;
        left: 0.32rem;
        bottom: -0.08rem;
        transform:rotate(60deg);
      }
    }
    .n23 {
      left: 7.81rem;
      bottom: 1.56rem;
      .text {
        top: -0.2rem;
        margin-left: 0.5rem;
      }
      &:before {
        height: 0.5rem;
        left: 0.32rem;
        top: -0.26rem;
        transform:rotate(80deg);
      }
    }
    .n24 {
      left: 7.76rem;
      bottom: 1.02rem;
      .text {
        top: -0.2rem;
        margin-left: 0.5rem;
      }
      &:before {
        height: 0.5rem;
        left: 0.32rem;
        top: -0.26rem;
        transform:rotate(80deg);
      }
    }
  }
  .calendar_table {
    th {
      padding: 0.05rem;
    }
    td {
      background-color: #1D54DB;
      &.normal {
        background-color: #4CEC9F;
        color: #050E5B;
      }
      &.pass {
        opacity: 0.8;
        .td_box {
          opacity: 0.5;
        }
      }
      .td_box {
        font-size: 0.14rem;
        height: 0.34rem;
        line-height: 0.34rem;
      }
    }
  }
  .labels {
    overflow: hidden;
    margin-bottom: 0.1rem;
    .label {
      float: left;
      color: #ffffff;
      padding-left: 0.13rem;
      position: relative;
      margin-right: 0.1rem;
      &:before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -0.05rem;
        width: 0.1rem;
        height: 0.1rem;
      }
      &.normal:before {
        background-color: #4CEC9F;
      }
      &.alarm:before {
        background-color: #FC0D1B;
      }
      &.off:before {
        background-color: #FFB500;
      }
      &.blue:before {
        background-color: #00C3F8;
      }
    }
  }
  .title-r {
    color: #4CEC9F;
    font-size: 0.16rem;
    font-weight: bolder;
    float: right;
    margin-top: -0.04rem;
  }
  .gauge-text {
    font-size: 0.2rem;
    color: #00C3F8;
    position: absolute;
    bottom: 0.3rem;
    left: 0;
    font-weight: bold;
    width: 100%;
    text-align: center;
  }
  .gauge-text-sm {
    color: #FF7E00;
    font-size: 0.12rem;
    position: absolute;
    width: 100%;
    bottom: 0.15rem;
  }
  .gauge-box {
    position: absolute;
    right: 0;
    top: 35%;
    .item {
      padding: 0.02rem 0.05rem;
      font-size: 0.18rem;
      font-weight: bold;
      margin-bottom: 0.15rem;
    }
    .item1 {
      background-color: #FF761E;
    }
    .item2 {
      background-color: #B3FF20;
    }
    .item3 {
      background-color: #00BEFF;
    }
  }
  .gauge-box2 {
    position: absolute;
    top: 0.6rem;
    color: #ffffff;
    text-align: left;
    .item {
      position: relative;
      padding-left: 0.14rem;
      &:before {
        content: '';
        width: 0.1rem;
        height: 0.1rem;
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -0.05rem;
      }
    }
    .item1:before {
      background-color: #3284D5;
    }
    .item2:before {
      background-color: #FF7E00;
    }
  }
  .table-box {
    color: #ffffff;
    border: 0.01rem solid #0E6DE9;
    position: relative;
  }
  .table-head {
    border-bottom: 0.01rem solid #0E6DE9;
    position: absolute;
    top: 0;
    width: 100%;
    background-color: #030A38;
    height: 0.3rem;
    line-height: 0.3rem;
    .ivu-col {
      padding: 0 0.05rem;
      border-right: 0.01rem solid #0E6DE9;
    }
  }
  .scroll-body {
    border-top: 0.01rem solid #0E6DE9;
    position: relative;
    margin-top: 0.3rem;
    height: 0.98rem;
    overflow: hidden;
    .ivu-row {
      display: flex;
    }
    .ivu-col {
      border-right: 0.01rem solid #0E6DE9;
      border-bottom: 0.01rem solid #0E6DE9;
    }
  }
</style>
